<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵩县全域智慧旅游产业大数据和决策分析云平台</title>
    <link rel="stylesheet" href="../../assets/css/public.css">
    <link rel="stylesheet" href="../../assets/css/common.css">
    <link rel="stylesheet" href="../../assets/css/index.css">
    <link rel="stylesheet" href="../../assets/css/basicElements.css">
    <link rel="stylesheet" href="../../assets/css/animate.min.css">
</head>
<body>
    <div class="box">
        <!--头部-->
        <div class="title-box">
            <div class="title-left">
                <span id="weather">小雨转晴</span>
                <span id="temperature">32/23℃</span>
                <span id="windPower">东风</span>
            </div>
            <div class="title-img">
                <h3>嵩县全域智慧旅游产业大数据和决策分析云平台</h3>
                <img src="../../assets/images/title-bg.png">
            </div>
            <div class="title-right">
                <a href="../admin/index.html">运营管理</a>
            </div>
        </div>
        <!--主体-->
        <div class="main-box">
            <!--导航-->
            <div class="nav-box">
                <ul>
                    <li>
                        <a href="../index/index.html">
                            <div>
                                <img src="../../assets/images/icon-index.png">
                                <img src="../../assets/images/icon-index-active.png">
                            </div>
                            <p>旅游发展环境</p>
                        </a>
                    </li>
                    <li class="active">
                        <a href="../basicElements/index.html">
                            <div>
                                <img src="../../assets/images/icon-analysis.png">
                                <img src="../../assets/images/icon-analysis-active.png">
                            </div>
                            <p>旅游基础要素</p>
                        </a>
                    </li>
                    <li>
                        <a href="../touristFlow/index.html">
                            <div>
                                <img src="../../assets/images/icon-image.png">
                                <img src="../../assets/images/icon-image-active.png">
                            </div>
                            <p>旅游客流监测</p>
                        </a>
                    </li>
                    <li>
                        <a href="../touristsPortrait/index.html">
                            <div>
                                <img src="../../assets/images/icon-portrait.png">
                                <img src="../../assets/images/icon-portrait-active.png">
                            </div>
                            <p>游客画像分析</p>
                        </a>
                    </li>
                    <li>
                        <a href="../tourismEnterprises/index.html">
                            <div>
                                <img src="../../assets/images/icon-operation.png">
                                <img src="../../assets/images/icon-operation-active.png">
                            </div>
                            <p>旅游企业监测</p>
                        </a>
                    </li>
                    <li>
                        <a href="../pinglun/index.html">
                            <div>
                                <img src="../../assets/images/icon-pinglun.png">
                                <img src="../../assets/images/icon-pinglun-active.png">
                            </div>
                            <p>互联网评论</p>
                        </a>
                    </li>
                </ul>
            </div>
            <!--数据内容-->
            <div class="content-box flex-column">
                <div class="content-nav">
                    <ul>
                        <li class="active">
                            <a href="#">旅游基础要素</a>
                        </li>
                    </ul>
                </div>
                <div class="content-main flex-row flex1">
                    <div class="content-left">
                        <div class="basicElements-leftTop animated bounceInDown">
                            <div class="content-title">
                                旅游产业要素
                            </div>
                            <div class="content-left-main flex1">
                                <ul class="basicElements-leftTop-nav">
                                    <li>
                                        <a href="./index.html">
                                            <div class="img-box">
                                                <img src="../../assets/images/jingqu.png">
                                                <img src="../../assets/images/jingqu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>景区</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_hotel.html">
                                            <div class="img-box">
                                                <img src="../../assets/images/zhusu.png">
                                                <img src="../../assets/images/zhusu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>住宿</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_food.html">
                                            <div class="img-box">
                                                <img src="../../assets/images/canyin.png">
                                                <img src="../../assets/images/canyin-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>餐饮</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="javascript:;">
                                            <div class="img-box">
                                                <img src="../../assets/images/gouwu.png">
                                                <img src="../../assets/images/gouwu-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>购物</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="./index_lxs.html">
                                            <div class="img-box">
                                                <img src="../../assets/images/lvxingshe.png">
                                                <img src="../../assets/images/lvxingshe-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>旅行社</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="active">
                                        <a href="index_wc.html">
                                            <div class="img-box">
                                                <img src="../../assets/images/wc.png">
                                                <img src="../../assets/images/wc-active.png">
                                            </div>
                                            <div class="heroic-content">
                                                <p>厕所</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <!--<div class="basicElements-leftTop-info">-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>5个</span>-->
                                        <!--<b>4A级</b>-->
                                    <!--</a>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>15个</span>-->
                                        <!--<b>3A级</b>-->
                                    <!--</a>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>20个</span>-->
                                        <!--<b>2A级</b>-->
                                    <!--</a>-->
                                    <!--<a href="javascript:;">-->
                                        <!--<span>30个</span>-->
                                        <!--<b>A级</b>-->
                                    <!--</a>-->
                                <!--</div>-->
                                <p class="total">共<i>37</i>条记录</p>
                                <ul class="basicElements-info-list scrollbar">
                                    <li><span>嵩县白云山景区九龙瀑布旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县白云山景区铜河换乘中心公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县白云山景区高山森林氧吧公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县白云山景区玉皇顶停车场公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县白云山景区九龙瀑布停车场公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县白云山景区情人谷公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县白云山景区中心广场公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县天池山景区飞来石停车场公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县天池山北沟服务区公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县天池山景区门岗公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县木札岭景区望瀑亭旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县木札岭景区拜观官台旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县木札岭景区三叠瀑旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县木札岭景区饮牛槽旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县木札岭景区原始森林旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县木札岭滑雪场西边旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县白河镇下寺村上寺组公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县木植街乡木植街村公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县库区乡桥北村文化广场公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县城关镇旅游集散中心服务大厅公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县石头部落游客服务中心公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县天桥沟汽车自驾游营地停车场公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县车村镇白云小镇旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县田湖镇两程故里廉政文化教育基地公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县田湖镇上湾村公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县大坪乡旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县德亭镇德亭村(驿站）</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县黄庄乡手绘小镇三合写生基地公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县旧县镇高速出入口（驿站）</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县伊河漂流景区停车场公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县旧县镇童子庄村公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县饭坡镇车站公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县纸房镇邓岭村公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县大章镇水沟村旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县闫庄镇胡沟村公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县何村乡吕岭旅游公厕</span><a href="javascript:;">查看</a></li>
                                    <li><span>嵩县玉皇山公园公厕</span><a href="javascript:;">查看</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="content-center flex3">
                        <div class="flex1 map-box bounceInUp animated">
                            <div class="map" id="myMap">

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="../../assets/plugin/jquery.min.js"></script>
<script src="../../assets/plugin/ECharts/echarts.js"></script>
<script src="../../assets/plugin/ECharts/china.js"></script>
<script src="../../assets/plugin/jquery.leoTextAnimate.js"></script>
<script src="../../assets/js/public.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=RbLCQuGNfG1cQrKmywquV6wEEkoVkyNY"></script>
</html>
<script>

    // 百度地图API功能
    var map = new BMap.Map("myMap", {minZoom:7,maxZoom:15}, { enableMapClick: false });
    var point = new BMap.Point(112.094137,34.140961);    // 初始化地图,设置中心点坐标
    map.centerAndZoom(point, 13);
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    var blist = [];
    var districtLoading = 0;
    //设置样式
    map.setMapStyle({
        styleJson: [
            {//不显示点信息
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "color": "#fffff ",
                    "visibility": "off"
                }
            }
        ]
    });map.setMapStyle({
        styleJson: [
            {//不显示点信息
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "color": "#fffff ",
                    "visibility": "off"
                }
            }
        ]
    });

    function getBoundary(){
        //百度地图获取行政区域的对象
        var bdary = new BMap.Boundary();

        bdary.get("嵩县", function (rs) {       //获取行政区域

            //以下是获取行政区域的回调
            // map.clearOverlays();        //清除地图覆盖物

            //需要绘制边界多边形的点集合
            var paths = new Array();
            //行政区域点集合，以;分隔的
            var pointliststr = rs.boundaries[0];
            //3获取点数组，push到 paths中
            var pointlist = pointliststr.split(";");
            var firstPoint;
            for(var i =0;i<pointlist.length;i++)
            {

                var tempPt = pointlist[i].split(',');
                var newPoint = new BMap.Point(tempPt[0],tempPt[1]);
                if(i==0){ firstPoint= newPoint;};

                paths.push(newPoint);
            }
            //第一点再推进去，形成一个闭环，构造了多边形的内环
            paths.push(firstPoint);

            //自定义的八个便捷点，从东开始逆时针，东，东北，北，西北，西，西南，南，东南（必须按顺序来）
            paths.push(new BMap.Point(170.672126, 39.623555));
            paths.push(new BMap.Point(170.672126, 81.291804));
            paths.push(new BMap.Point(105.913641, 81.291804));
            paths.push(new BMap.Point(-169.604276,  81.291804));
            paths.push(new BMap.Point(-169.604276, 39.623555));
            paths.push(new BMap.Point(-169.604276, -68.045308));
            paths.push(new BMap.Point(105.913641, -68.045308));
            paths.push(new BMap.Point(170.672126, -68.045308));
            paths.push(new BMap.Point(170.672126, 39.623555));

            //4绘制第一个多边形，覆盖住除行政区外的所有部分,fillColor:填充色，strokeColor：边界颜色（设置透明，否则会有其他线条），strokeOpacity：线条透明，fillOpacity：填充物透明。
            var ply1 = new BMap.Polygon("",
                { fillColor: "#062031", strokeColor: "transparent", strokeOpacity:0,fillOpacity:0.9}); //建立多边形覆盖物
            //将之前形成的点set到多边形对象中
            ply1.setPath(paths);
            //在地图上添加第一个多边形
            map.addOverlay(ply1);  //遮罩物是半透明的，如果需要纯色可以多添加几层


            //5. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层，绘制出边界线
            var ply = new BMap.Polygon(rs.boundaries[0],
                { strokeWeight: 2, strokeColor: "#000",fillColor: "transparent" });
            map.addOverlay(ply);
            map.setViewport(ply.getPath());    //调整视野
        });
    }
    // //创建并打开窗口
    function openInfo(content, e) {
        var p = e.target;
        console.log(e)
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }
    var opts = {
        width: 100,     // 信息窗口宽度
        height: 24,     // 信息窗口高度
        // title : "信息窗口" , // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    let newIcon = new BMap.Icon("../../assets/images/icon-wc.png", new BMap.Size(44, 44));
    var data_info = [
    [111.874565,33.67775, "九龙瀑布旅游公厕"],
    [111.88084,33.744953, "铜河换乘中心公厕"],
    [111.838419,33.668047, "高山森林氧吧公厕"],
    [111.841384,33.660039, "玉皇顶停车场公厕"],
    [111.87415,33.67857, "九龙瀑布停车场公厕"],
    [111.843761,33.669372, "情人谷公厕"],
    [111.851093,33.675706, "中心广场公厕"],
    [111.860437,34.286093, "飞来石停车场公厕"],
    [111.851152,34.250196, "北沟服务区公厕"],
    [111.859459,34.239476, "门岗公厕"],
    [112.253723,33.780041, "望瀑亭旅游公厕"],
    [112.266991,33.767369, "拜观官台旅游公厕"],
    [112.264325,33.773022, "三叠瀑旅游公厕"],
    [112.265944,33.771102, "饮牛槽旅游公厕"],
    [112.252613,33.746516, "原始森林旅游公厕"],
    [112.253772,33.780005, "滑雪场西边旅游公厕"],
    [112.005113,33.651129, "白河镇下寺村上寺组公厕"],
    [112.176445,33.959286, "木植街乡木植街村公厕"],
    [112.143038,34.191296, "库区乡桥北村文化广场公厕"],
    [112.11469,34.155886, "旅游集散中心服务大厅公厕"],
    [112.365659,34.21838, "石头部落游客服务中心公厕"],
    [111.953388,33.766412, "天桥沟汽车自驾游营地停车场公厕"],
    [111.954162,33.765195, "白云小镇旅游公厕"],
    [112.192458,34.225064, "田湖镇两程故里廉政文化教育基地公厕"],
    [112.22215,34.299768, "田湖镇上湾村公厕"],
    [112.070688,34.229844, "大坪乡旅游公厕"],
    [111.930474,34.144295, "德亭镇德亭村"],
    [112.20593,34.019238, "黄庄乡手绘小镇三合写生基地公厕"],
    [111.856997,34.030683, "旧县镇高速出入口（驿站）"],
    [111.856997,34.030683, "伊河漂流景区停车场公厕"],
    [111.862179,33.963206, "旧县镇童子庄村公厕"],
    [112.225414,34.190591, "饭坡镇车站公厕"],
    [112.112426,34.123297, "纸房镇邓岭村公厕"],
    [111.94792,34.082702, "大章镇水沟村旅游公厕"],
    [112.122744,34.25522, "闫庄镇胡沟村公厕"],
    [112.033748,34.085904, "何村乡吕岭旅游公厕"],
    [112.125614,34.12473, "玉皇山公园公厕"],

    ];
    var radioData = []
    var html=`<h3>公共厕所</h3><p>地址：河南省洛阳市嵩县S325(侯饭线)</p>`
    for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon:newIcon });  // 创建标注
        var content = data_info[i][2];
        var label = new BMap.Label(content);
        marker.setLabel(label);
        map.addOverlay(marker);               // 将标注添加到地图中
        addClickHandler(content, marker);
    }
    //添加点击事件
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function(e) {
            openInfo(html, e);
            // window.location.href='./indexDetail.html'
        });
    }
    //

    setTimeout(function(){
        getBoundary();
    }, 200);

</script>
